<template>
    <div class="page">
        <swiper :options="swiperOptions" :auto="2000" :height="180"/>
        <div class="nav-list bg-white">
            <div class="nav-item" v-for="item in navList">
                <img class="icon" :src="item.src">
                <span class="text">{{item.text}}</span>
            </div>
        </div>
        <news-label class="bg-white" text="中国大固收高端论坛走进内蒙古锡林郭勒大草郭勒大草郭勒大草"/>
        <title-label class="bg-white" title="资产平台"/>
        <capital-info class="bg-white" v-for="(item, key) in capital" :key="key" :data="item"/>
        <title-label class="bg-white" title="报价平台"/>
        <div class="bg-white">
            <div class="offer-list" v-for="(item, key) in offerList" :key="key">
                <div class="title">{{item.name}}</div>
                <div class="info">
                    <div class="date">{{item.date}}</div>
                    <div class="type">{{item.type}}</div>
                </div>
            </div>
        </div>
        <title-label class="bg-white" title="精品资讯"/>
        <div class="bg-white">
            <news-right-icon v-for="(item, key) in rightDats" :key="key" :data="item"/>
        </div>
        <title-label class="bg-white" title="数据研究"/>
        <div class="data-table bg-white">
            <div class="table-item">
                <span class="left-text">债券估值</span>
                <span class="right-text">06.13</span>
            </div>
            <div class="table-item">
                <span class="left-text">Shibor报价</span>
                <span class="right-text">06.13</span>
            </div>
            <div class="table-item">
                <span class="left-text">评级变动</span>
                <span class="right-text">06.13</span>
            </div>
            <div class="table-item">
                <span class="left-text">新债发行</span>
                <span class="right-text">06.13</span>
            </div>
            <div class="table-item">
                <span class="left-text">票据报价</span>
                <span class="right-text">06.13</span>
            </div>
            <div class="table-item">
                <span class="left-text">数据定制</span>
                <span class="right-text">个性化数据</span>
            </div>
        </div>
        <title-label class="bg-white" title="金融八卦"/>
        <div class="bg-white">
            <gossip-item v-for="(item, key) in gossipList" :key="key" :data="item"/>
        </div>
        <title-label class="bg-white" title="金领职场"/>
        <div class="bg-white">
            <workplace-item v-for="(item, key) in workplaceList" :key="key" :data="item"/>
        </div>
        <bottom-logo/>

      <!--   <bottom-popup-select title="title" v-model="selectWindow" :items="[1,2,3]">
            123
        </bottom-popup-select> -->
    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        background-color: @color-bg-gray;
        .bg-white{
            background-color: @color-white;
        }
        .nav-list{
            padding: .5rem .8rem;
            color: @color-text-black;
            border-bottom: 1px solid @color-line-gray;
            &:after{
                content: '';
                display: block;
                clear: both;
            }
            .nav-item{
                padding: .9rem 0;
                width: 25%;
                float: left;
                text-align: center;
                .icon{
                    display: block;
                    height: 3.5rem;
                    margin: 0 auto .8rem;
                }
                .text{
                    font-size: 1.4rem;
                    height: 2rem;
                }
            }
        }

        .offer-list{
            padding: 1.2rem 1.5rem 1.2rem 0;
            margin-left: 1.5rem;
            &:not(:last-child){
                border-bottom: 1px solid @color-line-gray;
            }
            .title{
                font-size: 1.5rem;
                line-height: 2.1rem;
                padding-bottom: .9rem;
            }
            .info{
                font-size: 1.2rem;
                line-height: 1.7rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: @color-text-gray;
            }
        }
        .data-table{
            &:after{
                content: '';
                display: block;
                clear: both;
            }
            .table-item{
                width: 50%;
                float: left;
                box-sizing: border-box;
                padding: 1.5rem;
                line-height: 2.1rem;
                border-bottom: 1px solid @color-line-gray;
                &:nth-of-type(odd){
                    border-right: 1px solid @color-line-gray;
                }
                .left-text{
                    font-size: 1.5rem;
                }
                .right-text{
                    font-size: 1.2rem;
                    float: right;
                    margin-right: .5rem;
                }
            }
        }
    }
</style>

<script>
    import index1 from '../../assets/index-fun-1-bj.svg'
    import index2 from '../../assets/index-fun-2-zc.svg'
    import index3 from '../../assets/index-fun-3-zk.svg'
    import index4 from '../../assets/index-fun-4-fc.svg'
    import index5 from '../../assets/index-fun-5-zx.svg'
    import index6 from '../../assets/index-fun-6-sj.svg'
    import index7 from '../../assets/index-fun-7-zc.svg'
    import index8 from '../../assets/index-fun-8-bg.svg'

    export default {
        data(){

            const swiperOptions = [
                {
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
                    to: '/same'
                },
                'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
            ];
            const navList = [
                {src: index1, text: '报价平台'},
                {src: index2, text: '资产平台'},
                {src: index3, text: '大成智库'},
                {src: index4, text: '报价平台'},
                {src: index5, text: '金融资讯'},
                {src: index6, text: '数据研究'},
                {src: index7, text: '金领职场'},
                {src: index8, text: '金融八卦'},
            ];

            const capital = [
                {
                    name: '某大型民营跨国集团2017年私募债',
                    amount: '20亿',
                    profit: '5.8-7.9%',
                    level: '主体AAA/债项AA+',
                    term: '24月',
                    country: '是',
                    guarantee: '有',
                },
                {
                    name: '某大型民营跨国集团2017年私募债',
                    amount: '20亿',
                    profit: '5.8-7.9%',
                    level: '主体AAA/债项AA+',
                    term: '24月',
                    country: '是',
                    guarantee: '有',
                }
            ];

            const offerList = [
                {
                    name: '出 非保本R2 标准 3-5M 5.15%发非保标准 -5M 5',
                    date: '2018-06-13 15:30',
                    type: '#线上#'
                },
                {
                    name: '出 非保本R2 标准 3-5M 5.15%发非保标准 -5M 5',
                    date: '2018-06-13 15:30',
                    type: '#线上#'
                }
            ];

            const rightDats = [
                {
                    title: '2017年 百家银行体检报告 21家银行晋身万亿资产俱乐部',
                    date: '2018-06-13 15:30',
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
                },
                {
                    title: '2017年 百家银行体检报告 21家银行晋身万亿资产俱乐部',
                    date: '2018-06-13 15:30',
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
                }
            ];

            const gossipList = [
                {
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                    name: '匿名',
                    date: '2018-06-13 15:30',
                    content: '2017年 百家银行体检报告 21家银行报告家晋身万亿资产俱乐部',
                    imgs: [
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                    ]
                },
                {
                    src: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                    name: '匿名',
                    date: '2018-06-13 15:30',
                    content: '2017年 百家银行体检报告 21家银行报告家晋身万亿资产俱乐部',
                    imgs: [
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
                    ]
                }
            ];

            const workplaceList = [
                {
                    title: '债券发行部北京分部负责人',
                    amount: '60-100W',
                    place: '北京',
                    name: '第一创业证券股份有限公司厦门分公司'
                },
                {
                    title: '债券发行部北京分部负责人',
                    amount: '60-100W',
                    place: '北京',
                    name: '第一创业证券股份有限公司厦门分公司'
                }
            ]

            return {
                swiperOptions,
                navList,
                capital,
                offerList,
                rightDats,
                gossipList,
                workplaceList,
                selectWindow: true
            }
        },
        methods: {
            onNavEvent(key){
                console.log('home', key);
            }
        }
    }
</script>
